<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <html-child :child-num="num" :child-age="age" :child-str="str" :child-arr="arr" :child-obj="obj"></html-child>

    </div>



    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        
        var app = new Vue({
            el:"#app",
            components:{
                'html-child':{
                    data() {
                        return {
                            message:"局部组件",
                        }
                    },
                    template:
                    `
                        <div>
                            {{childNum}}
                            {{childAge}}
                            {{childStr}}
                            {{childArr}}
                            {{childObj.name}}
                        </div>     
                    `,
                    props:{
                        childNum: Number,
                        childAge: [Number,String],
                        childStr: {
                            type: String,
                            default: "no str",//当没有绑定的时候显示的值
                        },
                        childArr: {
                            type: Array,
                           // required: true//必须绑定
                            //default和required是冲突的
                            default() {
                                return [];
                            }
                        },
                        childObj: {
                            type: Object,
                            default(){
                                return{
                                    name:"no name"
                                }
                            }
                           
                        }
                    }
                }
            },
            data:{
                message:"hello",
                num:1000,
                age:100,
                str:"abc",
                arr:[1,2,3,4,5],
                obj:{
                    name: "marscarm" 
                }
            },
            methods: {

            },
        })
    </script>

</body>
</html>